<template>
  <div class="category-list-wrapper">
    <div v-show="!addShow && !editShow">
      <div class="category-list">
        <SearchAndTable
          :searchData="searchData"
          :columns="columns"
          :getTableData="getTableData"
          ref="table"
        >
          <template #operate>
            <Button
              style="margin-bottom: 10px"
              type="primary"
              @click="addShow = true"
            >新增分类</Button>
          </template>
        </SearchAndTable>
      </div>
    </div>
    <Add
      @close="addShow = false"
      @update="update"
      v-if="addShow"
    />
    <Edit
      @close="editShow = false"
      @update="update"
      :info="item"
      v-if="editShow"
    />
  </div>
</template>

<script>
import SearchAndTable from './../../SearchAndTable/index'
import Add from './add'
import Edit from './edit'

export default {
  components: {
    SearchAndTable,
    Add,
    Edit
  },
  data() {
    return {
      addShow: false,
      editShow: false,
      item: {},
      columns: [
        {
          title: '序号',
          width: 80,
          align: 'center',
          type: 'index'
        },
        {
          title: '名称',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          key: 'name'
        },
        {
          title: '关联文章数',
          align: 'center',
          render: (h, { row }) => h('div', row.articles.length)
        },
        {
          title: '创建时间',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          key: 'createTime'
        },
        {
          title: '更新时间',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          key: 'updateTime'
        },
        {
          title: '操作',
          width: 150,
          fixed: 'right',
          render: (h, { row }) =>
            h('div', { class: 'oprate-box' }, [
              h(
                'Button',
                {
                  props: { type: 'primary', size: 'small' },
                  on: {
                    click: () => {
                      this.item = row
                      this.editShow = true
                    }
                  }
                },
                '编辑'
              ),
              h(
                'Button',
                {
                  props: { type: 'primary', size: 'small' },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '确认删除该条分类?',
                        onOk: () => {
                          this.deleteCategory(row)
                        }
                      })
                    }
                  }
                },
                '删除'
              )
            ])
        }
      ],
      searchData: [
        {
          label: '名称',
          labelWidth: 60,
          key: 'name',
          colSpan: '8'
        }
      ]
    }
  },
  methods: {
    // 删除分类
    deleteCategory({ id }) {
      this.$http
        .deleteCategory({ id })
        .then(res => {
          if (res) {
            this.$message({
              type: 'success',
              message: '删除分类成功!'
            })
            this.update()
          }
        })
        .catch(err => {
          console.log('删除分类失败！')
          this.$message({
            type: 'error',
            message: '删除分类失败!'
          })
        })
    },
    update() {
      this.$refs.table.refresh()
    },
    async getTableData(param) {
      const { data: res } = await this.$http.getAllCategorys(param)
      console.log('res...', res)
      return {
        data: res.data,
        total: res.data.length,
        success: res.data.code === 200
      }
    }
  }
}
</script>

<style>
.category-list-wrapper {
  padding: 10px;
}
.oprate-box button + button {
  margin-left: 5px;
}
</style>